<template>
  <view class="coupon-page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="tabs">
        <view 
          class="tab-item" 
          :class="{active: activeTab === index}"
          v-for="(tab, index) in tabs"
          :key="index"
          @click="changeTab(index)"
        >
          {{ tab.name }}
          <view class="tab-badge" v-if="tab.count > 0">{{ tab.count }}</view>
        </view>
      </view>
    </view>

    <!-- 优惠券列表 -->
    <scroll-view class="coupon-list" scroll-y>
		<view style="padding: 20rpx 30rpx;">
			<!-- 可用优惠券 -->
			<view class="coupon-section" v-if="activeTab === 0 && availableCoupons.length > 0">
			  <view class="section-title">可用优惠券</view>
			  <view 
			    class="coupon-card" 
			    v-for="(coupon, index) in availableCoupons" 
			    :key="coupon.id"
			    :class="{'highlight': coupon.highlight}"
			    @click="selectCoupon(coupon)"
			  >
			    <view class="coupon-left">
			      <view class="coupon-value">
			        <text class="currency">¥</text>
			        <text class="amount">{{ coupon.value }}</text>
			      </view>
			      <view class="coupon-condition">满{{ coupon.minAmount }}元可用</view>
			    </view>
			    <view class="coupon-right">
			      <view class="coupon-name">{{ coupon.name }}</view>
			      <view class="coupon-desc">{{ coupon.description }}</view>
			      <view class="coupon-time">
			        <u-icon name="clock" size="12" color="#999"></u-icon>
			        {{ coupon.expireTime }}前有效
			      </view>
			    </view>
			    <view class="coupon-tag" v-if="coupon.tag">{{ coupon.tag }}</view>
			    <view class="coupon-select" v-if="selectMode">
			      <u-icon name="checkmark" size="20" color="#fff" v-if="selectedCoupon && selectedCoupon.id === coupon.id"></u-icon>
			    </view>
			  </view>
			</view>
			
			<!-- 不可用优惠券 -->
			<view class="coupon-section" v-if="activeTab === 0 && unavailableCoupons.length > 0">
			  <view class="section-title">不可用优惠券</view>
			  <view 
			    class="coupon-card disabled" 
			    v-for="(coupon, index) in unavailableCoupons" 
			    :key="coupon.id"
			  >
			    <view class="coupon-left">
			      <view class="coupon-value">
			        <text class="currency">¥</text>
			        <text class="amount">{{ coupon.value }}</text>
			      </view>
			      <view class="coupon-condition">满{{ coupon.minAmount }}元可用</view>
			    </view>
			    <view class="coupon-right">
			      <view class="coupon-name">{{ coupon.name }}</view>
			      <view class="coupon-desc">{{ coupon.description }}</view>
			      <view class="coupon-time">
			        <u-icon name="clock" size="12" color="#999"></u-icon>
			        {{ coupon.expireTime }}前有效
			      </view>
			      <view class="coupon-reason">{{ coupon.unavailableReason }}</view>
			    </view>
			    <view class="coupon-tag" v-if="coupon.tag">{{ coupon.tag }}</view>
			  </view>
			</view>
			
			<!-- 已使用优惠券 -->
			<view class="coupon-section" v-if="activeTab === 1 && usedCoupons.length > 0">
			  <view 
			    class="coupon-card used" 
			    v-for="(coupon, index) in usedCoupons" 
			    :key="coupon.id"
			  >
			    <view class="coupon-left">
			      <view class="coupon-value">
			        <text class="currency">¥</text>
			        <text class="amount">{{ coupon.value }}</text>
			      </view>
			      <view class="coupon-condition">满{{ coupon.minAmount }}元可用</view>
			    </view>
			    <view class="coupon-right">
			      <view class="coupon-name">{{ coupon.name }}</view>
			      <view class="coupon-desc">{{ coupon.description }}</view>
			      <view class="coupon-time">使用时间: {{ coupon.usedTime }}</view>
			    </view>
			    <view class="coupon-tag used-tag">已使用</view>
			  </view>
			</view>
			
			<!-- 已过期优惠券 -->
			<view class="coupon-section" v-if="activeTab === 2 && expiredCoupons.length > 0">
			  <view 
			    class="coupon-card expired" 
			    v-for="(coupon, index) in expiredCoupons" 
			    :key="coupon.id"
			  >
			    <view class="coupon-left">
			      <view class="coupon-value">
			        <text class="currency">¥</text>
			        <text class="amount">{{ coupon.value }}</text>
			      </view>
			      <view class="coupon-condition">满{{ coupon.minAmount }}元可用</view>
			    </view>
			    <view class="coupon-right">
			      <view class="coupon-name">{{ coupon.name }}</view>
			      <view class="coupon-desc">{{ coupon.description }}</view>
			      <view class="coupon-time">已过期</view>
			    </view>
			    <view class="coupon-tag expired-tag">已过期</view>
			  </view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="showEmptyState">
			  <image src="/static/empty-coupon.png" mode="aspectFit"></image>
			  <view class="empty-text">{{ emptyText }}</view>
			  <view class="empty-btn" @click="goToGetCoupons" v-if="activeTab === 0">领取更多优惠券</view>
			</view>
		</view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer" v-if="selectMode && availableCoupons.length > 0">
      <view class="selected-coupon" v-if="selectedCoupon">
        已选: 满{{ selectedCoupon.minAmount }}减{{ selectedCoupon.value }}优惠券
      </view>
      <view class="btn-group">
        <view class="btn cancel" @click="cancelSelect">取消</view>
        <view class="btn confirm" @click="confirmSelect">确定使用</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    selectMode: {
      type: Boolean,
      default: false
    },
    currentAmount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeTab: 0,
      selectedCoupon: null,
      tabs: [
        { name: '未使用', count: 5 },
        { name: '已使用', count: 3 },
        { name: '已过期', count: 2 }
      ],
      allCoupons: [
        {
          id: 1,
          name: '新用户专享',
          value: 100,
          minAmount: 1000,
          description: '适用于所有无人机产品',
          expireTime: '2023-12-31',
          status: 'available',
          tag: '限时',
          highlight: true,
          usedTime: ''
        },
        {
          id: 2,
          name: '航拍套装优惠',
          value: 200,
          minAmount: 3000,
          description: '仅限航拍套装使用',
          expireTime: '2023-11-30',
          status: 'available',
          tag: '限量',
          usedTime: ''
        },
        {
          id: 3,
          name: '配件专用券',
          value: 50,
          minAmount: 500,
          description: '适用于所有配件产品',
          expireTime: '2023-12-15',
          status: 'unavailable',
          unavailableReason: '不满足使用条件',
          usedTime: ''
        },
        {
          id: 4,
          name: '双十一特惠',
          value: 150,
          minAmount: 1500,
          description: '全店通用优惠券',
          expireTime: '2023-11-12',
          status: 'used',
          usedTime: '2023-11-11 14:30'
        },
        {
          id: 5,
          name: '会员专享券',
          value: 80,
          minAmount: 800,
          description: '仅限会员使用',
          expireTime: '2023-10-31',
          status: 'expired',
          usedTime: ''
        }
      ]
    }
  },
  computed: {
    availableCoupons() {
      return this.allCoupons.filter(item => {
        if (item.status !== 'available') return false
        // 检查是否满足使用条件
        if (this.currentAmount > 0 && this.currentAmount < item.minAmount) {
          item.unavailableReason = `需满${item.minAmount}元可用`
          return false
        }
        return true
      })
    },
    unavailableCoupons() {
      return this.allCoupons.filter(item => {
        if (item.status !== 'available') return false
        // 不满足使用条件的优惠券
        if (this.currentAmount > 0 && this.currentAmount < item.minAmount) {
          item.unavailableReason = `需满${item.minAmount}元可用`
          return true
        }
        return false
      })
    },
    usedCoupons() {
      return this.allCoupons.filter(item => item.status === 'used')
    },
    expiredCoupons() {
      return this.allCoupons.filter(item => item.status === 'expired')
    },
    showEmptyState() {
      return (
        (this.activeTab === 0 && this.availableCoupons.length === 0 && this.unavailableCoupons.length === 0) ||
        (this.activeTab === 1 && this.usedCoupons.length === 0) ||
        (this.activeTab === 2 && this.expiredCoupons.length === 0)
      )
    },
    emptyText() {
      switch (this.activeTab) {
        case 0: return '暂无可用优惠券'
        case 1: return '暂无已使用的优惠券'
        case 2: return '暂无已过期的优惠券'
        default: return '暂无数据'
      }
    }
  },
  methods: {
    changeTab(index) {
      this.activeTab = index
      this.selectedCoupon = null
    },
    selectCoupon(coupon) {
      if (!this.selectMode) return
      this.selectedCoupon = coupon
    },
    confirmSelect() {
      if (!this.selectedCoupon) {
        uni.showToast({ title: '请选择优惠券', icon: 'none' })
        return
      }
      this.$emit('select', this.selectedCoupon)
    },
    cancelSelect() {
      this.$emit('cancel')
    },
    goToGetCoupons() {
      uni.navigateTo({ url: '/pages/coupon/market' })
    }
  }
}
</script>

<style lang="scss" scoped>
.coupon-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
  
  .header {
    background: linear-gradient(135deg, #2C5364 0%, #203A43 50%, #0F2027 100%);
    color: #fff;
    padding: 30rpx 30rpx 0;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    
    .tabs {
      display: flex;
      border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
      
      .tab-item {
        position: relative;
        padding: 20rpx 30rpx;
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.7);
        
        &.active {
          color: #fff;
          font-weight: bold;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60rpx;
            height: 4rpx;
            background: #fff;
            border-radius: 2rpx;
          }
        }
        
        .tab-badge {
          position: absolute;
          top: 10rpx;
          right: 10rpx;
          background: #ff4d4f;
          color: #fff;
          font-size: 20rpx;
          min-width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
          border-radius: 15rpx;
          padding: 0 8rpx;
          transform: scale(0.8);
        }
      }
    }
  }
  
  .coupon-list {
    flex: 1;
    
    .coupon-section {
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 20rpx;
        padding-left: 10rpx;
      }
    }
    
    .coupon-card {
      position: relative;
      display: flex;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      &.highlight {
        border-left: 8rpx solid #4facfe;
      }
      
      &.disabled, &.used, &.expired {
        opacity: 0.8;
        
        .coupon-left {
          background: #e0e0e0 !important;
          
          .coupon-value {
            color: #999 !important;
          }
          
          .coupon-condition {
            color: #999 !important;
          }
        }
        
        .coupon-right {
          .coupon-name, .coupon-desc {
            color: #999 !important;
          }
        }
      }
      
      .coupon-left {
        width: 200rpx;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30rpx 0;
        
        .coupon-value {
          color: #fff;
          text-align: center;
          
          .currency {
            font-size: 28rpx;
          }
          
          .amount {
            font-size: 48rpx;
            font-weight: bold;
            line-height: 1;
          }
        }
        
        .coupon-condition {
          font-size: 22rpx;
          color: rgba(255, 255, 255, 0.8);
          margin-top: 10rpx;
        }
      }
      
      .coupon-right {
        flex: 1;
        padding: 30rpx;
        
        .coupon-name {
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
        }
        
        .coupon-desc {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 15rpx;
        }
        
        .coupon-time {
          font-size: 22rpx;
          color: #999;
          display: flex;
          align-items: center;
        }
        
        .coupon-reason {
          font-size: 22rpx;
          color: #ff4d4f;
          margin-top: 10rpx;
        }
      }
      
      .coupon-tag {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        font-size: 20rpx;
        color: #fff;
        background: #ff4d4f;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        
        &.used-tag {
          background: #999;
        }
        
        &.expired-tag {
          background: #ccc;
        }
      }
      
      .coupon-select {
        position: absolute;
        bottom: 20rpx;
        right: 20rpx;
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        background: #4facfe;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100rpx 0;
      
      image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
        opacity: 0.6;
      }
      
      .empty-text {
        font-size: 28rpx;
        color: #999;
        margin-bottom: 30rpx;
      }
      
      .empty-btn {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: #fff;
        padding: 16rpx 40rpx;
        border-radius: 40rpx;
        font-size: 26rpx;
      }
    }
  }
  
  .footer {
    background: #fff;
    padding: 20rpx 30rpx;
    box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .selected-coupon {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 20rpx;
      text-align: center;
    }
    
    .btn-group {
      display: flex;
      
      .btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 30rpx;
        font-weight: bold;
        border-radius: 40rpx;
        
        &.cancel {
          background: #f0f0f0;
          color: #666;
          margin-right: 20rpx;
        }
        
        &.confirm {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          color: #fff;
        }
      }
    }
  }
}
</style>